<!DOCTYPE html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ycngu的博客">
    <meta name="keyword" content="noob">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <title>
        
        HTML常用标签 - ycngu的博客 | Ycngu&#39;s Blog
        
    </title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/aircloud.css">
    <link rel="stylesheet" href="/css/gitment.css">
    <!--<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">-->
    <link href="//at.alicdn.com/t/font_620856_pl6z7sid89qkt9.css" rel="stylesheet" type="text/css">
    <!-- ga & ba script hoook -->
    <script></script>
</head>

<body>

<div class="site-nav-toggle" id="site-nav-toggle">
    <button>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
    </button>
</div>

<div class="index-about">
    <i> 菜鸟前端为何要战斗？ </i>
</div>

<div class="index-container">
    
    <div class="index-left">
        
<div class="nav" id="nav">
    <div class="avatar-name">
        <div class="avatar">
            <img src="/img/avatar.jpg">
        </div>
        <div class="name">
            <i>YCNGU</i>
        </div>
    </div>
    <div class="contents" id="nav-content">
        <ul>
            <li>
                <a href="/">
                    <i class="iconfont icon-shouye1"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="/tags">
                    <i class="iconfont icon-biaoqian1"></i>
                    <span>标签</span>
                </a>
            </li>
            <li>
                <a href="/archive">
                    <i class="iconfont icon-guidang2"></i>
                    <span>存档</span>
                </a>
            </li>
            <li>
                <a href="/about/">
                    <i class="iconfont icon-guanyu2"></i>
                    <span>关于</span>
                </a>
            </li>
            
            <li>
                <a id="search">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>搜索</span>
                </a>
            </li>
            
        </ul>
    </div>
    
        <div id="toc" class="toc-article">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML常用标签"><span class="toc-text">HTML常用标签</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#a"><span class="toc-text">a</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#img"><span class="toc-text">img</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#div-span"><span class="toc-text">div /span</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#form-input-button"><span class="toc-text">form / input / button</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#hr"><span class="toc-text">hr</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ol-，ul-li"><span class="toc-text">ol ，ul , li</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#iframe"><span class="toc-text">iframe</span></a></li></ol></li></ol>
</div>
    
</div>


<div class="search-field" id="search-field">
    <div class="search-container">
        <div class="search-input">
            <span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
            <input id="search-input">
            <span id="begin-search">搜索</span>
        </div>
        <div class="search-result-container" id="search-result-container">

        </div>
    </div>
</div>
        <div class="index-about-mobile">
            <i> 菜鸟前端为何要战斗？ </i>
        </div>
    </div>
    
    <div class="index-middle">
        <!-- Main Content -->
        


<div class="post-container">
    <div class="post-title">
        HTML常用标签
    </div>

    <div class="post-meta">
        <span class="attr">发布于：<span>2018-10-01 23:52:52</span></span>
        
        <span class="attr">标签：/
        
        <a class="tag" href="/tags/#javascript" title="javascript">javascript</a>
        <span>/</span>
        
        
        </span>
        <span class="attr">访问：<span id="busuanzi_value_page_pv"></span>
</span>

    </div>
    <div class="post-content ">
        <h1 id="HTML常用标签"><a href="#HTML常用标签" class="headerlink" title="HTML常用标签"></a>HTML常用标签</h1><blockquote>
<ul>
<li>a</li>
<li>img</li>
<li>div / span</li>
<li>form</li>
<li>input / button</li>
<li>ol / ul / li</li>
<li>iframe<a id="more"></a>
</li>
</ul>
</blockquote>
<h2 id="a"><a href="#a" class="headerlink" title="a"></a>a</h2><p>【标签】&lt;a&gt;&lt;/a&gt;<br>【属性】<br>href：链接地址（要跳转到的页面的地址）<br>target：目标，打开新网页的形式<br>取值：<br>     _blank：在新标签页中打开<br>     _self：在自身页面中打开（默认值）<br>title：鼠标放到链接上的提示</p>
<h2 id="img"><a href="#img" class="headerlink" title="img"></a>img</h2><p>【标签】&lt;img&gt;<br>【属性】<br>        src：图片地址（绝对/相对）<br>        width：图像宽度<br>        height：图像高度</p>
<h2 id="div-span"><a href="#div-span" class="headerlink" title="div /span"></a>div /span</h2><p> 【标签】&lt;div&gt;    &lt;/div&gt;     &lt;span&gt;    &lt;/span&gt;    </p>
<ul>
<li>div是 division的缩写,意思是<strong>分隔</strong>,span意思是<strong>范围</strong></li>
<li>div的display为block，span的display为inline</li>
<li>div常用于页面布局，span用于划分行内段落</li>
</ul>
<h2 id="form-input-button"><a href="#form-input-button" class="headerlink" title="form / input / button"></a>form / input / button</h2><p> form,表单最常见的就是注册和登陆表单，通常与input / button一起用<br>【标签】&lt;form&gt;    &lt;/form&gt;<br>【常见属性】<br>        action：提交的服务器地址<br>        method：表单数据提交的方式，取值： get：明文提交/post：隐式提交<br>        name：定义表单名称，JS用到的比较多<br>        id： 独一无二的标识<br>如：&lt;form action=”url” method=”get/post”&gt;     &lt;/form&gt;    </p>
<p>  【标签】&lt;input&gt;<br>  【主要属性】<br>        type：根据不同的type属性值可以创建各种类型的输入字段<br>        value：最终提交给服务器的值<br>        name：控件的名称，提供给服务器使用，没有name，控件则无法提交<br>        id：唯一标识，只能在当前页面使用，服务器不能用<br>        disabled：禁用，不能被提交<br> 【注意】<br>    <strong>input是空标签，button不是，空标签不能有子元素</strong></p>
<p>【标签】&lt;button&gt;    &lt;/button&gt;<br> 【主要属性】<br>   type：规定按钮的类型，有button，submit，reset<br>   【注意】<br>   <strong>当button位于form内部时，如果不标明type,type属性自动设置为submit</strong><br>   <strong>当input的type为submit时，也可以提交表单</strong></p>
<h2 id="hr"><a href="#hr" class="headerlink" title="hr"></a>hr</h2><p>【标签】&lt;hr&gt;<br>【属性】<br>        size：尺寸，取值单位为 px（像素），可以省略<br>        width：宽度，取值单位为px（像素）可以省略或百分比<br>        color：颜色，取值自然颜色值<br>        align：水平对齐方式，取值：left/center/right</p>
<h2 id="ol-，ul-li"><a href="#ol-，ul-li" class="headerlink" title="ol ，ul , li"></a>ol ，ul , li</h2><p>【标签】&lt;ol&gt;    &lt;/ol&gt;     &lt;ul&gt;    &lt;/ul&gt;     &lt;li&gt;    &lt;/li&gt;    </p>
<ul>
<li>ol , Ordered List 有序列表</li>
<li>ul , Unordered List 无序列表</li>
<li>li , List Item 列表项目</li>
</ul>
<p>一般是列表包裹着列表项<br>如<br><figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">&lt;ol&gt;</span></span><br><span class="line">  <span class="section">&lt;li&gt;</span><span class="section">&lt;/li&gt;</span></span><br><span class="line">  <span class="section">&lt;li&gt;</span><span class="section">&lt;/li&gt;</span></span><br><span class="line">  <span class="section">&lt;li&gt;</span><span class="section">&lt;/li&gt;</span></span><br><span class="line"><span class="section">&lt;/ol&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="section">&lt;ul&gt;</span></span><br><span class="line">  <span class="section">&lt;li&gt;</span><span class="section">&lt;/li&gt;</span></span><br><span class="line">  <span class="section">&lt;li&gt;</span><span class="section">&lt;/li&gt;</span></span><br><span class="line">  <span class="section">&lt;li&gt;</span><span class="section">&lt;/li&gt;</span></span><br><span class="line"><span class="section">&lt;/ul&gt;</span></span><br></pre></td></tr></table></figure></p>
<h2 id="iframe"><a href="#iframe" class="headerlink" title="iframe"></a>iframe</h2><p>iframe是嵌入页面，现在已经很少使用了<br>【标签】&lt;iframe&gt;    &lt;/iframe&gt;<br>【主要属性】<br>frameborder：规定是否显示框架周围的边框。<br>src：    规定在 iframe 中显示的文档的 URL。<br>height：规定 iframe 的高度。<br>width:规定 iframe 的宽度。</p>

        
        <br>
        <div id="comment-container">
        </div>
        <div id="disqus_thread"></div>

        <div id="lv-container">
        </div>

    </div>
</div>

    </div>
</div>


<footer class="footer">
    <ul class="list-inline text-center">
        
        

        

        

        

        

    </ul>
    
    <p>
        <span>/</span>
        
        <span><a href="https://ycngu.gitee.io/">Ycngu&#39;s Page</a></span>
        <span>/</span>
        
        <span><a href="#">It helps SEO</a></span>
        <span>/</span>
        
    </p>
    
    <p>
        <span id="busuanzi_container_site_pv">
            <span id="busuanzi_value_site_pv"></span>PV
        </span>
        <span id="busuanzi_container_site_uv">
            <span id="busuanzi_value_site_uv"></span>UV
        </span>
        Created By <a href="https://hexo.io/">Hexo</a>  Theme <a href="https://github.com/aircloud/hexo-theme-aircloud">AirCloud</a></p>
</footer>




</body>

<script>
    // We expose some of the variables needed by the front end
    window.hexo_search_path = "search.json"
    window.hexo_root = "/"
    window.isPost = true
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/index.js"></script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


    <script>
        /**
         *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
         *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
        */
        if( '' || '')
        var disqus_config = function () {
            this.page.url = '';  // Replace PAGE_URL with your page's canonical URL variable
            this.page.identifier = ''; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };

        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document, s = d.createElement('script');
            s.src = 'https://airclouds-blog.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>



</html>
